<template>
	<div>
		<el-select v-model="v" :placeholder="placeholder" :disabled="disabled" :size="size" :filterable="filterable" :clearable="clearable" @change="onChange">
			<el-option v-for="item in list" :label="item.name" :value="item.value" :key="item.value"></el-option>
		</el-select>
	</div>
</template>
<script>
export default {
	name: 'DictSelect',
	props: {
		value: [String, Array, Number],
		placeholder: {
			type: String,
			default: function () {
				return '请选择...';
			}
		},
		code: {
			type: String,
			default: function () {
				return '';
			}
		},
		exclude: {
			type: String,
			default: function () {
				return '';
			}
		},
		disabled: {
			type: Boolean,
			default: false
		},
		size: {
			type: String,
			default: function () {
				return 'small';
			}
		},
		filterable: {
			type: Boolean,
			default: false
		},
		clearable: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			v: '',
			list: []
		};
	},
	computed: {
		dictArr() {
			return this.$store.state.user.dict;
		}
	},
	watch: {
		dictArr: function (value) {
			if (value && value.length) {
				this.list = this.dictArr.find((e) => e.code == this.code).details;
				if (this.list.length && this.exclude && this.exclude.split(',').length) {
					let excludeArr = this.exclude.split(',');
					let arr = [];
					this.list.forEach((e, i) => {
						if (excludeArr.find((ee) => ee == e.name)) {
							arr.push(i);
						}
					});
					arr.forEach((e) => {
						this.list.splice(e, 1);
					});
				}
			}
		}
	},
	mounted() {
		if (this.dictArr && this.dictArr.length) {
			this.list = this.dictArr.find((e) => e.code == this.code).details;
			if (this.list.length && this.exclude && this.exclude.split(',').length) {
				let excludeArr = this.exclude.split(',');
				let arr = [];
				this.list.forEach((e, i) => {
					if (excludeArr.find((ee) => ee == e.name)) {
						arr.push(i);
					}
				});
				arr.forEach((e) => {
					this.list.splice(e, 1);
				});
			}
		}
	},
	methods: {
		onChange() {
			this.$emit('input', this.v);
			this.$emit('on-change', this.v);
		}
	}
};
</script>
